<template>
  <div>App</div>
  <!-- 声明式导航 -->
  <router-link to="/home?name=jack">Home</router-link>
  <router-link :to="{ name: 'About', query: { age: 18 } }">About</router-link>
  <!-- 编程式导航 -->
  <button @click="$router.push('/about')">About</button>
  <button @click="toAbout">About</button>

  <router-link to="/detail/1">Detail</router-link>
  <router-link
    :to="{
      name: 'Detail',
      params: {
        id: 2,
      },
    }"
  >
    Detail
  </router-link>

  <router-link to="/home/message">Message</router-link>

  <!-- 
    加载渲染一级路由组件 
  -->
  <!-- 
      router-view 
        如果没有传递默认插槽给router-view，router-view组件默认加载渲染对应路由组件
        如果传递了默认插槽给router-view，传递的插槽是啥就渲染啥
          与此同时，router-view将原来想要渲染对应路由组件 以作用域插槽的形式 传递给父组件
            Component：原来想要渲染对应路由组件 
              如果当前地址是 /home ，Component就是Home组件
              如果当前地址是 /about ，Component就是About组件

     -->
  <!-- 
        component是vue提供内置元素，
          component默认啥也不渲染，is的值是啥，component渲染啥
      -->
  <!-- 
        transition 给包裹元素添加类名(要求子元素必须有根标签)
          显示 -> 隐藏  
            v-leave-from
            v-leave-active
            v-leave-to

          隐藏 -> 显示
            v-enter-from
            v-enter-active
            v-enter-to
       -->
  <router-view v-slot="{ Component }">
    <!-- <template v-slot="{ Component }"> -->
    <transition name="fade">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
    <!-- </template> -->
  </router-view>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<script lang="ts" setup>
/*
  1. 路由配置

  2. 路由跳转方式
    声明式导航
    编程式导航

  3. 路由参数
    query
    params
    meta
  
  4. 嵌套路由

  5. 路由导航守卫
    全局路由导航守卫
      beforeEach 权限控制：控制用户访问权限
      beforeResolve
      afterEach
    路由独享导航守卫
    组件独享导航守卫
  
  6. 缓存路由组件 keep-alive

    被 keep-alive 缓存的组件多两个生命周期函数 onActivated, onDeactivated

  7. 路由过渡 transition
*/
import { useRouter } from "vue-router";

const router = useRouter();

const toAbout = () => {
  router.push("/about");
};
</script>

<style scoped>
/* 显示 -> 隐藏 */
/* .fade-leave-from,
.fade-enter-to {
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: opacity 1s;
}

.fade-leave-to,
.fade-enter-from {
  opacity: 0;
} */

/* 隐藏 -> 显示 */

.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 1s;
}

.fade-enter-to {
  opacity: 1;
}
</style>
